<template>
  <div style="display: flex">
    <Menu :dataList="menuList" v-if="isShow" :isOpen="isOpen" @select-menu="handlerSelect"></Menu>

    <div style="display: block; width: 100%">
      <div class="header">
        <!-- 顶部栏 -->
        <div>
          <el-button
            @click="open"
            type="text"
            style="padding: 4px 15px; margin: 8px 5px 5px 15px; border: 0"
          >
            <el-icon><More /></el-icon>
          </el-button>
        </div>
        <div style="display: flex; margin-right: 20px">
          <div class="item">
            <a type="text" style="color: #000; border: 0" @click="downLog" title="点击导出审核日志"
              >操作日志</a
            >
          </div>
          <div class="item">
            <a href="https://bwkkdbz4gdn.feishu.cn/file/BVpAbxghdouBzKxWM2kc1lSXnMg">文档</a>
          </div>
          <div class="item" style="display: flex">
            <!-- <el-avatar :icon="UserFilled" /> -->
            <img
              src="https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png"
              alt=""
              style="width: 30; height: 30px; border-radius: 50%; margin: 10px 5px 0 5px"
            />
            <el-dropdown>
              <span class="el-dropdown-link" style="line-height: 50px; color: #000"> 管理员 </span>
              <template #dropdown>
                <el-dropdown-menu>
                  <el-dropdown-item :icon="CloseBold" @click="logout">退出登录</el-dropdown-item>
                </el-dropdown-menu>
              </template>
            </el-dropdown>
          </div>
        </div>
      </div>
      <router-view></router-view>
    </div>
  </div>
  <MessageTip ref="messageTip"></MessageTip>
</template>

<script setup>
import { onMounted, ref } from 'vue'
import Menu from './Menu.vue'
import request from '@/util/request'
import { ElMessage, ElNotification } from 'element-plus'
import MessageTip from '@/components/MessageTip.vue'
import { useRouter } from 'vue-router'

// 菜单列表
const menuList = ref([])

const isShow = ref(false)

const router = useRouter()

const isOpen = ref(false)
const messageTip = ref()
const menu = ref({
  menuName: '首页'
})

const open = () => {
  isOpen.value = !isOpen.value
}

const handlerSelect = (item) => {
  console.log('菜单', item)
  menu.value = item
  console.log('menu', menu.value)
}

const downLog = () => {
  request
    .post('/admin/document/excel')
    .then((res) => {
      messageTip.value.open(res.data)
    })
    .catch((err) => {
      if (err.response) {
        console.error(err.message)
        // ElMessage.error('出错了', err.message)
        ElNotification({
          title: 'Error',
          message: err.message,
          type: 'error'
        })
      } else {
        ElNotification({
          title: 'Error',
          message: '网络错误',
          type: 'error'
        })
      }
    })
}

const logout = ()=>{
  localStorage.clear()
  router.push('/alogin')
}

onMounted(() => {
  console.log('执行了')

  console.log('登录了', localStorage.getItem('token'))

  request
    .get('/admin/menu/list')
    .then((res) => {
      if (res.code === 200) {
        console.log('获得的菜单列表', res.data)
        menuList.value = res.data
      } else {
        ElMessage.error(res.msg)
      }
    })
    .catch((err) => {
      if (err.response) {
        console.error(err.message)
        // ElMessage.error('出错了', err.message)
        ElNotification({
          title: 'Error',
          message: err.message,
          type: 'error'
        })
        
      } else {
        ElNotification({
          title: 'Error',
          message: '网络错误' + err,
          type: 'error'
        })
      }
    })

  isShow.value = true
})
</script>

<style scoped>
body {
  margin: 0;
  padding: 0;
  background: #eee;
  overflow-x: hidden;
}

.item {
  width: 100px;
  height: 50px;
  line-height: 50px;
  text-align: center;
}

.item:hover {
  cursor: pointer;
  background: #006e54;
  color: black;
}

.header {
  width: 100%;
  background: #fff;
  height: 50px;
  display: flex;
  justify-content: space-between;
  color: #fff;
  border-bottom: #eee 1px solid;
}

a {
  text-decoration-line: none;
  color: #000;
}
</style>
